<?php
$totalElectores = 0;
$totalPSUV = 0;
$totalPatrulleros = 0;
$votos = 0;
$votos_chavez = 0;
$abstencion = 0;
foreach ($this->singleList as $key => $value) {
    $valOposicion = $value['votos'] - $value['votos_chavez'];
    $valAbstencion = $value['electores'] - $value['votos'];
    $ArrayMunicipio[] = $value['municipio'] . '<br>' . $valOposicion . '<br>' . $value['votos_chavez'] . '<br>' . $valAbstencion;
    $totalElectores = $totalElectores + $value['electores'];
//    print $value['electores'];
//    $totalPSUV = $totalPSUV + $value['electores_PSUV'];
    $ArrayPSUV[] = number_format(($value['electores_PSUV'] * 100) / $value['electores'], 1);
//    $totalPatrulleros = $totalPatrulleros + $value['electores_patrulleros'];
//    print $value['electores_patrulleros'];
    $votos = $votos + $value['votos'];
//    print $value['votos'];
    $votos_chavez = $votos_chavez + $value['votos_chavez'];
    $ArrayChavez[] = number_format(($value['votos_chavez'] * 100) / $value['electores'], 1);
    $ArrayOposicion[] = number_format((($valOposicion) * 100) / $value['electores'], 1);
    $abstencion = $abstencion + ($value['electores'] - $value['votos']);
    $ArrayAbstencion[] = number_format((($value['electores'] - $value['votos']) * 100) / $value['electores'], 1);
}
$municipio = "'" . implode("','", $ArrayMunicipio) . "'";
$munChavez = implode(",", $ArrayChavez);
$munOposicion = implode(",", $ArrayOposicion);
$munAbstencion = implode(",", $ArrayAbstencion);
$munPSUV = implode(",", $ArrayPSUV);
?>
<script>
    $(function () {
        var chart;

        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    //                    events: {
                    //                        load: function() {
                    //    
                    //                            // set up the updating of the chart each second
                    //                            var series = this.series[0];
                    //                            setInterval(function() {
                    //                                var x = (new Date()).getTime(), // current time
                    //                                y = Math.random();
                    //                                series.addPoint([x, y], true, true);
                    //                            }, 1000);
                    //                        }
                    //                    }
                
                    events: {
                        load: function() {
                    
                            // set up the updating of the chart each second
                            var series = this.series[0];
                            setInterval(function() {
                                //                                var x = (new Date()).getTime(), // current time
                                //                                y = Math.random();
                                //                                series.addPoint([x, y], true, true);
                                //                                alert('hola');
                            }, 10000);
                        }
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            color: '#000000',
                            connectorColor: '#000000',
                            formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
                            }
                        }
                    },
                    column: {
                        dataLabels: {
                            enabled: true,
                            color: '#AA4643',
                            style: {
                                fontWeight: 'bold'
                            },
                            formatter: function() {
                                return this.y +'%';
                            }
                        },
                        point: {
                            events: {
                                click: function() {
                                    var drilldown = this.drilldown;
                                    if (drilldown) { // drill down
                                        setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                    } else { // restore
                                        setChart(name, categories, data);
                                    }
                                }
                            }
                        }
                    }
                },
                title: {
                    text: 'Grafico por Municipio'
                },
                xAxis: {
                    categories: [<?php print $municipio; ?>]
                },
                yAxis: {
                    title: {
                        text: 'Votos'
                    }
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1,
                    formatter: function() {
                        var s;
                        if (this.point.name) { // the pie chart
                            s = ''+
                                this.point.name +': '+ this.y +' Votos';
                        } else {
                            s = ''+
                                this.x  +'<br> '+ this.y+'%';
                        }
                        return s;
                    }
                },
                labels: {
                    items: [{
                            html: 'Estado',
                            style: {
                                left: '40px',
                                top: '8px',
                                color: 'black'
                            }
                        }]
                },
                series: [{
                        type: 'column',
                        name: 'Votos Oposición',
                        data: [<?php print $munOposicion; ?>],
                        color: '#4572A7'
                    }, {
                        type: 'column',
                        name: 'Votos Chávez',
                        data: [<?php print $munChavez; ?>],
                        color: '#AA4643'
                    }, {
                        type: 'column',
                        name: 'Abstención',
                        data: [<?php print $munAbstencion; ?>],
                        color: '#000000'
                    }, {
                        type: 'spline',
                        name: 'Meta',
                        data: [<?php print $munPSUV; ?>],
                        color: '#AA4643',
                        marker: {
                            lineWidth: 2,
                            lineColor: '#AA4643',
                            fillColor: '#FFFFFF'
                        }
                    }, {
                        type: 'pie',
                        name: 'Total Yaracuy',
                        data: [{
                                name: 'Chávez',
                                y: <?php print $votos_chavez; ?>,
                                color: '#AA4643'
                            }, {
                                name: 'Abstención',
                                y: <?php print $abstencion; ?>,
                                color: '#000000'
                            }, {
                                name: 'Oposición',
                                y: <?php print $votos - $votos_chavez; ?>,
                                color: '#4572A7'
                            }],
                        center: [100, 80],
                        size: 100,
                        showInLegend: false,
                        dataLabels: {
                            enabled: false
                        }
                    }]
            });
        });

    });
</script>
<div id="container" style="min-width: 400px; max-width: 100%; height: 400px; margin: 0 auto"></div>